<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main section h1,
        .main article h2{
            font-weight:bold;
        }
        .sidebar h3{
            font-style: italic;
        }

        input[required]:focus{
            border-color:blue;
            outline:none;
        }

        input[placeholder]::-moz-placeholder {  
        color: gray;  
        }  

        nav ul li a.active:hover {  
           background-color: darkgray;
        }
        nav ul li a:hover {  
           color: white;  
        }

        h2.special-title::first-letter {  
          font-size: 2em;  
          float: left;   
          color: gold;    
          background-color: transparent; 
          margin-right: 0.1em; 
          line-height: 1;
        }

        .list > li > ul:first-child {  
          background-color: lightgray; 
        }  
        .list li:hover * {  
          color: darkblue; 
        }
        
        .container form input:focus {  
           border-color: green; 
           outline: none; 
        } 
        .container label:hover {  
          background-color: lightblue;  
        }
    </style>
</head>
<body>
    <div class="main">
        <section id="intro">
          <h1>Welcome</h1>
          <p>This is the introduction section.</p>
        </section>
        <article class="post">
          <h2>Post Title</h2>
          <p>Post content...</p>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </article>
        <aside class="sidebar">
          <h3>看上你了小妞</h3>
          <p>Sidebar content...</p>
        </aside>
      </div>

      <form>
        <input type="text" name="username" required placeholder="Username">
        <input type="email" name="email" required placeholder="Email">
        <input type="submit" value="Submit">
      </form>

      <nav>
        <ul>
          <li><a href="#home" class="active">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>

      <h2 class="special-title">Special Title</h2>

      <ul class="list">
        <li>Item 1
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
          </ul>
        </li>
        <li>Item 2
          <ul>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
          </ul>
        </li>
      </ul>

      <div class="container">
        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name">
          <label for="password">Password:</label>
          <input type="password" id="password" name="password">
          <button type="submit">Submit</button>
        </form>
      </div>
      
</body>
</html>